<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<div class="user-info">
						<div class="user-info-top">
							<el-avatar :size="80" :src="form.portrait"></el-avatar>
							<h2>{{ form.name||'-' }}</h2>
							<el-button type="primary" round icon="el-icon-collection-tag" size="medium">Administrator</el-button>
						</div>
						<div class="user-info-main">
							<ul>
								<li><label><i class="el-icon-user"></i></label><span>{{form.name}}</span></li>
								<li><label><i class="el-icon-male"></i></label><span>男</span></li>
								<li><label><i class="el-icon-office-building"></i></label><span>摸鱼组</span></li>
								<li><label><i class="el-icon-coin"></i></label><span>超级管理员</span></li>
							</ul>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :lg="16">
				<el-card shadow="never">
					<el-tabs tab-position="top">
						<el-tab-pane :label="$t('user.password')">
							<el-form ref="passform" :model="formdata" :rules="passrules" label-width="80px" style="width: 460px;margin-top:20px;">
								<el-form-item label="账号">
									<el-input v-model="formdata.user" disabled></el-input>
									<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
								</el-form-item>
								<el-form-item label="旧密码" prop="oldPassword">
									<el-input v-model="formdata.oldPassword" type="password"></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="password">
									<el-input v-model="formdata.password" type="password"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="editpassFun" :loading="isSaveing">保存</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane :label="$t('user.settings')">
							<el-form label-width="120px" style="margin-top:20px;">
								<el-form-item :label="$t('user.nightmode')">
									<el-switch v-model="config.theme" active-value="dark" inactive-value="default"></el-switch>
								</el-form-item>
								<el-form-item label="主题颜色">
									<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
								</el-form-item>
								<el-form-item :label="$t('user.language')">
									<el-select v-model="config.lang">
										<el-option label="简体中文" value="zh-cn"></el-option>
										<el-option label="English" value="en"></el-option>
										<el-option label="日本語" value="ja"></el-option>
									</el-select>
									<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import colorTool from '@/utils/color'

	export default {
		name: 'userCenter',
		data() {
			return {
				form: this.$TOOL.data.get('G_USER_INFO'),
				formdata: {},
				isSaveing: false,
				passrules: {
					password: [
						{ required: true, message: '请输入新密码', trigger: 'blur', },
						{ min: 6, max: 15, message: '请输入6到15个字符', trigger: 'blur'}
					],
					oldPassword: [
						{ required: true, message: '请输入旧密码', trigger: 'blur', },
						{ min: 6, max: 15, message: '请输入6到15个字符', trigger: 'blur'}
					]
				},
				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
				config: {
					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
					theme: this.$TOOL.data.get('APP_THEME') || 'default',
					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
				}
			}
		},
		watch:{
			'config.theme'(val){
				document.body.setAttribute('data-theme', val)
				this.$TOOL.data.set("APP_THEME", val);
			},
			'config.lang'(val){
				this.$i18n.locale = val
				this.$TOOL.data.set("APP_LANG", val);
			},
			'config.colorPrimary'(val){
				document.documentElement.style.setProperty('--el-color-primary', val);
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
				}
				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
				this.$TOOL.data.set("APP_COLOR", val);
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter (to, from, next){
			next((vm)=>{
				if(from.is){
					//删除特殊标识，防止标签刷新重复执行
					delete from.is
					//执行特殊方法
					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
						type: 'success',
						center: true
					}).then(() => {}).catch(() => {})
				}
			})
		},
		methods: {
			async editpassFun(){
				var validate = await this.$refs.passform.validate().catch(()=>{})
				if(!validate){ return false }
				this.isSaveing = true
				let user = await this.$API.auth.pass.put(this.formdata).catch(()=>{
					this.isSaveing = false;
				})
				this.isSaveing = false
				if(user.error == 0){
					this.formdata = {}
					this.$notify.success("修改成功")
				}
			}
		}
	}
</script>

<style scoped>
	.el-card {margin-bottom:15px;}
</style>
